{{ extend 'layout.html'}}

<div id="status">
    <table class="table table-bordered table-condensed">
        <tr>
            <td style="background-color: #D9EDF7" width="80%">
                <div id='task_header'>
                    <dl>
                        <dt>Name</dt>
                        <dd><span id='task_name'></span></dd>
                        <dt>Status</dt>
                        <dd><span id='task_status'></span></dd>
                        <dt>Worker</dt>
                        <dd><span id='task_worker_name'></span></dd>
                        <dt>Arguments:</dt>
                        <dd>{{=task.args}}</dd>
                        <dd>{{=task.vars}}</dd>
                </div>
            </td>
            <td rowspan="2">
                <div id='timers'>
                    <dl>
                        <dt>Queued</dt>
                        <dd>{{=task.start_time}}</dd>
                        <dt>Started</dt>
                        <dd><span id='task_worker_start'></span></dd>
                        <dt>Expires</dt>
                        <dd><span id='task_expiration'></span></dd>
                        <dt>Ended</dt>
                        <dd><span id='task_worker_end'></span></dd>
                    </dl>
                </br>
                <div id='txt_task_stop'><button id="stop_button" class="btn btn-small btn-danger"><i class="icon-stop"></i> Stop Task</button></div>
            </td>
        </tr>
    </table>
</div>

<div>
    <ul class="nav nav-tabs">
        <li class="active"><a href="#tasklog" data-toggle="tab">Task Log</a></li>
        <li><a id="a_traceback" href="#traceback" data-toggle="tab">Traceback Error</a></li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane active" id="tasklog">
            <pre id='task_logs' style="overflow: auto; height: 400px; background-color: black; color: #EEE;">
            </pre>
        </div>

        <div class="tab-pane" id="traceback">
            <pre id='task_traceback' style="overflow: auto; height: auto; background-color: black; color: #EEE;">
            </pre>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        /*$("traceback").toggle();
        $("traceback").click(function() {
            $(this).toggle();
        });*/

        $("#stop_button").on('click', function() {
            if (! $(this).hasClass('disabled')) {
                var url = "{{=URL('tasks', 'stop.json', user_signature=True)}}";
                $.web2py.ajax_page( 'POST', url, "id={{=task.id}}", 'undefined' );
            }
        });

        $('#a_traceback').hide();
        $(".nav a").click(function(e) {
           if($(this).parent('li').hasClass('active')) {
               var target_pane=$(this).attr('href');
               $(target_pane).is(':visible');
           }
        });

    });

    (function() {

      jQuery(function($) {
        return $(function() {
          return $(document).ready(function() {
            var $log, task, updateLog;
            $log = $('#task_logs');
            task = $log.attr('task');
            $log.bind('scrollToBottom', function() {
              return $(this).scrollTop($(this)[0].scrollHeight);
            });

            $log.bind('addLine', function(event, html) {
              var prevLine;
              prevLine = $(this).data('prevLine');
              if (html !== prevLine) {
                $(this).append(html).trigger('scrollToBottom');
              }
              return $(this).data('prevLine', html);
            });

            updateLog = function() {
              var lines;
              if ($("#task_logs .end").length === 0) {
                //lines = $log.children().length;
                return $.get("{{=URL('tasks', 'output.json', args=task.id)}}", function(data) {

                  $('#task_name').html(data['name']);
                  $('#task_status').html(data['status']);
                  $('#task_logs').html(data['output']);
                  $('#task_traceback').html(data['traceback']);
                  $('#task_worker_name').html(data['worker']);
                  $('#task_worker_start').html(data['start']);
                  $('#task_worker_end').html(data['ended']);
                  $('#task_expiration').html(data['expiration'])

                  var status = data['status'];
                  if ((status != 'QUEUED') && (status != 'RUNNING') && (status != 'ASSIGNED')) {
                    $('#stop_button').addClass('disabled');
                    $('#task_worker_end').html(data['ended']);
                    if ((status == 'FAILED') || (status == 'TIMEOUT') ){
                        $('#task_status').addClass('text-error');
                        $('#a_traceback').show();
                        $('#task_logs').height('auto');
                    }
                    return clearTimeout(updateLog);
                  }
                  $log.trigger('scrollToBottom');
                  return window.setTimeout(updateLog, 3000);
                });
              }
            };
            $log.trigger('scrollToBottom');
            return updateLog();
          });
        });
      });

    }).call(this);

</script>
